<template>
	<div class="wrap">
		<router-view name="third"></router-view>
		<h4>商品信息</h4>
		<table style="border-collapse:collapse;" v-for="item in dataArr">
			<tr class="title"><th><input type="checkbox" class="all"/>{{item.name}}</th><th>{{item.norms}}</th><th>{{item.unit}}</th><th>{{item.count}}</th><th>{{item.total}}</th><th>{{item.operation}}</th></tr>
			<tr class="content" v-for="(k,index) in item.detailArr"><td><input type="checkbox" class="once"/><img :src="k.img" alt="" />{{k.name}}</td><td>一个装</td><td>¥{{k.price}}</td><td><i>{{k.cont}}</i></td><td>¥{{k.sum}}</td><td><span @click="remove(index)">删除</span></td></tr>
		</table>
		<div class="footer"><span>商品总价</span><span>¥{{adc}}</span></div>
		<button class="footbtn" @click="queren">确认订单</button>
		<h4>开票信息</h4>
		<tr class="choose">
			<input type="radio" name="invoice"/>不需要&nbsp;&nbsp;
			<input type="radio" name="invoice"/>个人&nbsp;&nbsp;
			<input type="radio" name="invoice"/>单位
		</tr><br />
		发票抬头 : <input type="text" class="rise"/><span class="major">请填写后认真核对发票信息</span>
		<h3>添加订单备注</h3>
		<input type="text" placeholder="限45个字,请填写有关商品、支付、发票等信息" class="info"/>
	</div>
</template>

<script>
	export default{
		name:'orderIntro',
		data(){
			return{
				cont:1,
				dataArr:[{
					name:"爱果果水果店",
					norms:"规格",
					unit:"单价",
					count:"数量",
					total:"金额",
					operation:"操作",
					detailArr:[]
				}]
			}	
		},
		methods:{
			queren:function(){
				window.location.href="#/Ordersuccess"
			},
			remove:function(index){
				var goodsid = this.dataArr[0].detailArr[index].id
				console.log(goodsid)
				var _this=this;
				this.axios.get('/api/remove',{params:{
					id:goodsid
				}}).then(function(data){
					if(data.data.err==0){
						alert("删除失败")
					}else{
						_this.dataArr[0].detailArr.splice(index,1)
						alert("删除成功")
					}
				})
			}
		},
		computed:{
			adc:function(){
				var addsum=0;
				for(var i=0;i<this.dataArr[0].detailArr.length;i++){
					console.log(this.dataArr[0].detailArr[i].sum)
					addsum = addsum + this.dataArr[0].detailArr[i].sum
				}
				return addsum;
			}
		},
		created(){
			var _this=this;
			this.axios.get('/api/myshopcar').then(function(data){
					_this.dataArr[0].detailArr = data.data
				})
		}
	}
</script>

<style scoped>
	h4,h3{
		margin-bottom: 20px;
		border-top:#e9e9e9 solid 1px;
		padding-top: 20px;
		font-weight: 300;
		font-size: 16px;
	}
	h3{
		margin-top: 20px;
	}
	h4{
		margin-top: 100px;	
	}
	.wrap{
		width: 1280px;
		margin: 0 auto;
	}
	table{
	border: 1px solid  rgb(242,242,242);
	width: 1280px;
	outline: none;
	margin: 20px 0;
	}
	.title{
		background-color: rgb(242,242,242);
		color: rgb(123,123,123);
		line-height: 46px;
		font-weight: 100;
	}
	.title input{
		margin:0 20px;
	}
	th{
		font-size: 16px;
		text-align: left;
	}
	.info{
		width: 625px;
		height: 35px;
		border: #d3d3d3 solid 2px;
		padding-left: 20px;
		margin-bottom: 50px;
	}
	.content{
		line-height: 120px;
		border-bottom: 1px solid  rgb(242,242,242);
	}
	.content img{
		vertical-align: middle;
		width: 100px;
		height: 100px;
		margin-right:10px;
	}
	td{
		font-size: 15px;	
		text-align: left;
		color: rgb(123,123,123);
	}
	td input{
		margin: 0 20px;
	}
	td i{
			display: inline-block;
			text-align: center;
			width: 20px;
			line-height: 21px;
			font-style: normal;
	}
	.add,.sub{
			font-style: normal;
			padding: 0 4px;
			background-color: #f2f2f2;
			color: lightgray;
			border: 1px solid lightgray;
			cursor: pointer;
		}
		.choose{
			display: inline-block;
			margin-bottom: 20px;
		}
		.rise{
			width: 370px;
			height: 35px;
			border: #d3d3d3 solid 2px;
		}
		.major:before{
			content:"*";
			color: red;
			margin-left: 20px;
		}
		.footer{
			line-height: 70px;
			font-size: 20px;
			position: relative;
			left: 1113px;
		}
		.footer>span:nth-child(2){
			font-size: 23px;
			color: red;
		}
		.footbtn{
			width: 200px;
			height: 36px;
			font-size: 20px;
			color: white;
			background-color: rgb(247,131,39);
			position: relative;
			left: 1113px;
		}
</style>